---
import AsideItem from "@components/common/aside/AsideItem.astro";
import AsideTitle from "@components/common/aside/AsideTitle.astro";
---

<!-- 热门评论 -->
<AsideItem>
  <AsideTitle itemTitle="热门评论">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="w-6 h-6 mb-2"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
      ></path>
    </svg>
  </AsideTitle>
  <th:block th:with="cs=${@commentTag.pageCommentRecent(themeName,1,10).rows}">
  <div
    class="space-y-4 capitalize text-xs font-normal mt-1 mb-2 text-gray-500 dark:text-white/80"
  >
    <div class="flex flex-row" th:each="c:${cs}">
      <div class="basis-1/4">
        <a href="#">
        <img
          class="rounded-full w-20 h-20"
          src="/nice/static/images/thumbs/1.jpg"
          th:src="${imgPrefix+c.fromUser.avatar}"
          th:alt="${c.fromUser.nickName}"
        />
      </a>
      </div>
      <div class="basis-3/4 pt-2">
        <div class="overflow-hidden h-12">
        <a href="#" th:utext="${c.content}" th:title="${c.content}">
          Suggested For Suggested For Suggested For Suggested For Suggested For Suggested For
          Suggested For Suggest
          Suggested For Suggested For Suggested For Suggested For Suggested For Suggested For
          Suggested For Suggest Suggested For Suggested For Suggested For Suggested For Suggested For Suggested For
          Suggested For Suggest
        </a>
        </div>
        <div class="pt-2">
        <a href="#" class="font-medium text-blue-600 dark:text-blue-500"
        th:text="${c.fromUser.nickName}">Read more</a
        ><time class="block mr-4 float-right" th:text="${#dates.format(c.createTime, 'HH:mm')}">刚刚</time>
      </div>
      </div>
    </div>
  </div>
</th:block>
</AsideItem>
